<!DOCTYPE HTML>
<html>
    <head>
        <meta name="renderer" content="webkit">
        <meta content="统一认证,合肥讯百科技"/>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        
        <link rel="stylesheet" th:href="${AppRootContext}+'/assets/elementui/element-2.7.2.css'" >
        <link rel="icon" th:href="${AppRootContext}+'/assets/favicon.ico'" type="image/x-icon" />
        <link rel="shortcut icon" th:href="${AppRootContext}+'/assets/favicon.ico'" type="image/x-icon" />
        <link rel="bookmark" href="${AppRootContext}/assets/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" th:href="${AppRootContext}+'/assets/font-awesome/4.7.0/css/font-awesome.min.css'" >
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/js/polyfill.min.js'"></script>
        <title>用户登录</title>
        <style>
            html,body
            {
                padding:0px;
                margin:0px;
                height:100%;
                background:#405C89;
                background: #0a224a url([[${AppRootContext}]]/assets/image/background.jpg) no-repeat top;
            }
            .container
            {
            }
            .el-header
            {
                padding:0px;
            }
            .el-menu.el-menu--horizontal
            {
                border-bottom:0px;
            }
            .copyright
            {
                position:absolute;
                bottom:10px;
                width:100%;
                left:0px;
                text-align:center;
                z-index:1000;
            }
            .copyright > span
            {
                color:#aaa;
                font-size:11px;
                padding:8px;
            }
            .copyright a
            {
                color:#aaa;
                font-size:11px;
                text-decoration:none;
            }
            .menu-box
            {
                
            }
            .menu-block
            {
                width:140px;
                height:120px;
                display:inline-block;
                margin:2px 2px 0px 0px;
                background:#D9E8F4;
                color:#333;
                text-decoration:none;
                text-align:center;
                transition: all 0.5s;
            }
            .menu-block i
            {
                color:#0a224a;
                font-size:60px;
            }
            .menu-block span
            {
                display:block;
                padding:4px 0px;
            }
            .menu-block:hover,.menu-block.active
            {
                background:#3A91FD;
                color:#fff; 
            }
            .menu-block:hover *,.menu-block.active *
            {
                color:#fff; 
            }
            .menu-block > div
            {
                display:table;
                width:100%;
                height:100%;
            }
            .menu-block > div > div
            {
                display:table-cell;
                vertical-align:middle;
            }
            .el-menu--horizontal>.el-menu-item
            {
                height:50px;
                line-height:50px;
            }
            .el-menu.el-menu--horizontal{
                background-color: hsla(0,0%,100%,.1);
                box-shadow: 0 5px 10px rgba(0,0,0,.1);
            }
            .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover
            {
                background:none;
                border-bottom-color: rgb(255, 255, 255)!important;
            }
            .el-menu-item
            {
                font-size:16px;
            }
            .el-menu-item a
            {
                text-decoration:none;
            }
            .el-menu-item i
            {
                margin-right: 5px;
                font-size: 20px;
                line-height:50px;
                top: -2px;
                position: relative;
                color:rgb(204, 204, 204);
            }
            .logout i
            {
                color:red!important;
            }
            .row-rdurl{
            	font-size:12px;
            	overflow:hidden;
			    text-overflow:ellipsis;
			    white-space:nowrap;
            }
            .el-pagination{
            	padding:5px 0 5px 10px;
            	animation:color 5s infinite linear alternate;
            }
            @keyframes color{
            	0%{
            		background-color: rgba(0,0,0,0.1);
            	}
            	100%{
            		background-color:rgba(0,0,0,0.5);
            	}
            }
            @keyframes move{
            	from {
            		height:0%;
            	} 
            	to {
            		height:100%;
            	}
            }
            .anime-test{
            	position:absolute;
            	bottom:4px;
            	width:4px;
            	left:calc(100% - 4px);
            	background-color: #409EFF;
            	animation:move 5s infinite linear;
            	animation-direction:alternate;
            }
        </style>
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/js/vue-2.6.7.js'"></script>
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/js/axios.min.js'"></script>
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/elementui/element-2.7.2.js'"></script>
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/js/xbell.js'"></script>
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/js/xbell-elementui.js'"></script>
    </head>
    <body>
    	<!-- <div class="anime-test"></div> -->
        <div class="container">
            <el-container>
                <el-header>
                    <el-menu :default-active="active_mode" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#ccc" active-text-color="#ffffff">
					  <el-menu-item index="me"><i class="fa fa-home fa-fw"></i>我的应用</el-menu-item>
					  <el-menu-item index="all_client"><i class="fa fa-home fa-fw"></i>全部应用</el-menu-item>
					  <el-menu-item index="app_manage" sec:authorize="hasPermission('随便写','但是要俩参数')" ><i class="fa fa-cubes fa-fw"></i>应用管理</el-menu-item>
					  <el-menu-item index="user" sec:authorize="hasPermission(#request,'xxx')" ><i class="fa fa-user-circle-o fa-fw"></i>用户管理</el-menu-item>
					  <el-menu-item index="about"><a href="http://www.xbellsoft.com" target="_blank"><i class="fa fa-fw fa-info-circle"></i>关于</a></el-menu-item>
                      <el-menu-item index="logout" class="logout" style="float:right;color:red;"><a th:href="${AppRootContext}+'/logout'"><i class="fa fa-fw fa-power-off"></i>退出登录</a></el-menu-item>
					</el-menu>
                </el-header>
                
                <!-- 添加用户 -->
                <el-dialog :title="user_optype==1?'添加用户':'修改用户信息'" :visible.sync="user_show" :close-on-click-modal="false" width="50%">
					<el-form size="small" inline label-position="right" label-width="100px" :rules="user_rules" ref="user_form" :model="user_data">
						<el-form-item label="学号/职工号" prop="XH">
							<el-input v-model="user_data.XH" :disabled="user_optype==2"></el-input>
						</el-form-item>	
						<el-form-item label="姓名" prop="XM">
							<el-input v-model="user_data.XM"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="PWD" v-if="user_optype==1">
							<el-input type="password" v-model="user_data.PWD"></el-input>
						</el-form-item>
						<el-form-item label="确认密码" prop="CK_PWD" v-if="user_optype==1">
							<el-input type="password" v-model="user_data.CK_PWD"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-select v-model="user_data.XB"  style="width:200px;padding-right:15px;">
								<el-option v-for="item in [{label:'男',value:1},{label:'女',value:0}]" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="用户类型">	
							<!-- <el-input v-model="user_data.LX"></el-input> -->
							<el-select v-model="user_data.LX" style="width:200px;padding-right:15px;">
								<el-option v-for="item in [{label:'教师',value:1},{label:'学生',value:0}]" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>	
						<el-form-item label="民族">
							<el-input v-model="user_data.MZ"></el-input>
						</el-form-item>
						<el-form-item label="籍贯">
							<el-input v-model="user_data.JG"></el-input>
						</el-form-item>
						<el-form-item label="政治面貌">	
							<el-input v-model="user_data.ZZMM"></el-input>
						</el-form-item>	
						<el-form-item label="身份证">
							<el-input v-model="user_data.SFZ"></el-input>
						</el-form-item>	
					</el-form>					
					<div slot="footer" class="dialog-footer">
						<el-button @click="user_show = false" size="small">取 消</el-button>
						<el-button type="primary" @click="save_user" size="small">确 定</el-button>
					</div>
				</el-dialog>
				
				<el-dialog title="重置密码" :visible.sync="reset_pwd_show" :close-on-click-modal="false" style="background-color:rgba(0,0,0,0.3)" width="40%">
					<el-form size="small" inline label-position="right" label-width="100px" :rules="reset_pwd_rules" ref="reset_pwd_form" :model="reset_pwd_data">
						<el-form-item label="学号/职工号" prop="userId">
							<el-input v-model="reset_pwd_data.userId" disabled></el-input>
						</el-form-item>	
						<el-form-item label="密码" prop="pwd">
							<el-input type="password" v-model="reset_pwd_data.pwd"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="reset_pwd_show = false" size="small">取 消</el-button>
						<el-button type="primary" @click="save_reset_pwd" size="small">确 定</el-button>
					</div>
				</el-dialog>
                
                <!-- 授权管理 -->
                <el-dialog title="授权管理" :visible.sync="user_client_show" :close-on-click-modal="false" style="background-color:rgba(0,0,0,0.3)" width="40%">
                	<el-transfer v-model="user_client" :data="client_info"  :titles="['未授权', '授权']"></el-transfer>
                	<div slot="footer" class="dialog-footer">
						<el-button @click="user_client_show = false" size="small">取 消</el-button>
						<el-button type="primary" @click="save_user_client" size="small">确 定</el-button>
					</div>
                </el-dialog>
                
                <el-dialog :title="client_optype==1?'添加应用':'修改应用信息'" :visible.sync="client_show" :close-on-click-modal="false" style="background-color:rgba(0,0,0,0.3)" width="40%">
                	<el-form size="small" inline label-position="right" label-width="100px" :rules="client_rules" ref="client_form" :model="client_data">
						<el-form-item label="CLIENTID" prop="CLIENTID">
							<el-input v-model="client_data.CLIENTID" :disabled="client_optype==2"></el-input>
						</el-form-item>	
						<el-form-item label="应用名" prop="TITLE">
							<el-input v-model="client_data.TITLE"></el-input>
						</el-form-item>
						<el-form-item label="图标" prop="ICON">
							<div style="display:flex;flex-direction: row">
								<el-input v-model="client_data.ICON"></el-input>
								<i style="line-height:33px;margin-left:10px;" :class="client_data.ICON"></i>
							</div>
						</el-form-item>
						<el-form-item label="状态" prop="STATE">	
							<el-select v-model="client_data.STATE" style="width:200px;padding-right:15px;">
								<el-option v-for="item in [{label:'可用',value:1},{label:'不可用',value:0}]" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>	
						<el-form-item label="跳转URL" prop="RDURL">
							<el-input v-model="client_data.RDURL"  type="textarea" resize="none" rows=3 style="width:400px"></el-input>
						</el-form-item>
						<el-form-item label="秘钥" prop="SECRET">	
							<el-input v-model="client_data.SECRET"  type="textarea" resize="none" rows=3 style="width:400px"></el-input>
						</el-form-item>	
					</el-form>
                	<div slot="footer" class="dialog-footer">
						<el-button @click="client_show = false" size="small">取 消</el-button>
						<el-button type="primary" @click="save_client" size="small">确 定</el-button>
					</div>
                </el-dialog>
                
                
                <el-main>
                    <div class="menu-box" v-if="active_mode=='me'">
	                    <a v-for="item in apps" class="menu-block" :href="item.auth">
							<div>
								<div><i :class="item.icon"></i><span>{{item.name}}</span></div>
	                        </div>
	                    </a>
                    </div>
                    <div class="menu-box" v-if="active_mode=='all_client'">
	                    <a v-for="item in all_apps" class="menu-block" :href="item.auth">
	                       <div>
	                           <div>
	                               <i :class="item.icon"></i>
	                               <span>{{item.name}}</span>
	                           </div>
	                        </div>
	                    </a>
                    </div>
                    <div class="menu-box" v-if="active_mode=='app_manage'">
                    	<el-row style="margin-bottom:30px;">
                    		<el-input placeholder="cliendId或应用名" size="small" v-model="client_search.kw" clearable style="width:200px"></el-input>
							<el-button type="primary" size="small" @click="btn_client_search"><i class="fa fa-fw fa-search"></i>搜索</el-button>
							<el-button type="primary" size="small" @click="show_client_add"><i class="fa fa-fw fa-plus"></i>添加</el-button>
                    	</el-row>
                    	<ws-el-table :url="ld_client_url" ref="client_table" v-loading="op_posting" key="client">
                    		<template v-slot:table="table">
								<el-table :data="table.data" height="550">
									<el-table-column label="CLIENTID">
										<template slot-scope="scope">
											<i :class="scope.row.ICON"></i>
											<span>{{scope.row.CLIENTID}}</span>
										</template>
									</el-table-column>
									<el-table-column label="应用名" prop="TITLE"></el-table-column>
									<el-table-column label="状态">
										<template slot-scope="scope">
											<el-tag type="primary" v-if='scope.row.STATE==1'>可用</el-tag>
											<el-tag type="danger" v-if='scope.row.STATE!=1'>不可用</el-tag>
										</template>
									</el-table-column>
									<el-table-column label="跳转URL">
										<template slot-scope="scope">
											<span class="row-rdurl" v-for="url in (scope.row.RDURL||'').split(',')">{{url}}</span>
										</template>
									</el-table-column>
									<el-table-column label="创建人" prop="OPID"></el-table-column>
									<el-table-column label="创建时间" prop="OPTIME">
										<template slot-scope="scope">
											{{(scope.row.OPTIME||"").substring(0,10)}}
										</template>
									</el-table-column>
									<el-table-column label="操作">
										<template slot-scope="scope">
											<el-button type="warning" size="small" @click="show_client_edit(scope.row)">修改</el-button>
											<el-button type="danger" size="small" @click="delete_client(scope.row)">删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</template>		    
                    	</ws-el-table>
                    	
                    </div>
                    <div class="menu-box" v-if="active_mode=='user'">
                    	<el-row style="margin-bottom:30px;">
                    		<span>类型：</span>
							<el-select placeholder="请选择" size="small" v-model="user_search.lx">
						    	<el-option v-for="item in user_lx_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						  	</el-select>
                    	
							<el-input placeholder="学号/职工号或姓名" size="small" v-model="user_search.kw" clearable style="width:200px"></el-input>
							<el-button type="primary" size="small" @click="btn_user_search"><i class="fa fa-fw fa-search"></i>搜索</el-button>
							<el-button type="primary" size="small" @click="show_user_add"><i class="fa fa-fw fa-plus"></i>添加</el-button>
							
							<input type="file" ref="user_file" style="display:none" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
							<el-button type="primary" size="small" @click="import_template"><i class="ace-icon fa fa-download"></i>模板下载</el-button>
							<el-button type="warning" size="small" @click="import_user"><i class="fa fa-fw fa-upload"></i>用户导入</el-button>
						</el-row>
                    	
                    	<ws-el-table :url="ld_user_url" ref="user_table" v-loading="op_posting" key="user">
                    		<template v-slot:table="table">
								<el-table :data="table.data" height="550">
									<el-table-column label="序号" type="index" width="50"></el-table-column>
									<el-table-column label="学号/职工号" prop="XH"></el-table-column>
									<el-table-column label="姓名" prop="XM"></el-table-column>
									<el-table-column label="性别">
										<template slot-scope="scope">
											{{scope.row.XB==0?'女':'男'}}
										</template>
									</el-table-column>
									<el-table-column label="类型">
										<template slot-scope="scope">
											{{scope.row.LX==1?'教师':'学生'}}
										</template>
									</el-table-column>
									<el-table-column label="籍贯" prop="JG"></el-table-column>
									<el-table-column label="政治面貌" prop="ZZMM"></el-table-column>
									<el-table-column label="操作" width="300">
										<template slot-scope="scope">
											<el-button type="warning" size="small" @click="show_user_client(scope.row)">授权管理</el-button>
											<el-dropdown :hide-timeout="500">
											  	<el-button size="small" type="primary"><i class='fa fa-fw fa-chevron-down'></i>信息修改</el-button>
											  	<el-dropdown-menu slot="dropdown">
												    <el-dropdown-item>
												    	<span @click="show_user_edit(scope.row)">修改信息</span>
												    </el-dropdown-item>
												    <el-dropdown-item>
														<span  @click="delete_user(scope.row)">删除</span>
													</el-dropdown-item>
												    <el-dropdown-item>														
														<span @click="reset_pwd(scope.row)">重置密码</span>
												    </el-dropdown-item>
												</el-dropdown-menu>
											</el-dropdown>		    
										</template>
									</el-table-column>
								</el-table>
							</template>		    
                    	</ws-el-table>
                    </div>
                </el-main>
                
                
            </el-container>
        </div>
        <div class="copyright">
            <span>版权所有 &copy; 2020 | [[${AppName}]]v[[${AppVersion}]]| <a target="_blank" href="">[[${ClientName}]]</a></span>
        </div>
        <script type="text/javascript">
        	window._AppRootContext = '[[${AppRootContext}]]';
        </script>
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/js/app/index.js'"></script>
    </body>
</html>